<template>
  <div class="login" v-on:click.self="clickBox($event)">
    <div class="loginBox">
		<div class="main">
			<h1 class="login_title">East Xin</h1>
			<ul>
				<li class="form-item">
					<input 
						type="text" 
						placeholder="用户名" 
						class="username"
						v-on:click="showPasInpt()"
						v-model="userInt"> 
					<button type="button" class="el-button trans register" v-on:click="loginBtn">
						<span>一键登入</span>
					</button>
				</li>
				<li class="form-item">
					<input 
						type="password" 
						placeholder="密码" 
						class="password trans"
						v-model="pasInt" 
						v-bind:class="{heightHide: showPasInp}"/>
				</li>
			</ul>
		</div>
   </div>
  </div>
</template>

<script>
	import home from './home'
	import notices from './pageModule/notices'
	
	export default {
	   name: 'login',
	   components: {
	  	 home,
	   	 notices
	   },
	   data () {
	   		return {
	      		showPasInp: true,//密码框的显示与隐藏
	      		userInt: '',//用户名
	      		pasInt: '',//密码
	      		isActive_name: false,//用户名错误信息提示
	      		isActive_pas: false, //密码错误信息提示
	      		nodesc: false,
		  		noticeText: ''  //信息提示内容
			}
	    },
	    methods: {
			clickBox (event){
				var nameVal = this.userInt;//用户名
				var pasVal = this.pasInt;//密码值
	//			console.log(this.$el.className)
				if(!nameVal && !pasVal && this.$el.className == 'login'){
					this.showPasInp = true;
				}
			},
			showPasInpt () {//点击用户名框
				this.showPasInp = false;
			},
			loginBtn (){//一键登入事件
				var nameVal = this.userInt;//用户名
				var pasVal = this.pasInt;//密码值
	//			console.log(nameVal, pasVal)
				if(nameVal || pasVal){
					if(/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(nameVal) && /^\d{6,15}$/.test(pasVal)){
						this.noticeSuccess (this.nodesc);//引入iView提示框---登陆成功
						//输入用户名符合规范 && 输入密码符合规范
						this.$router.push({ path: '/home/index' });
						localStorage.name = escape(nameVal);
					};
					if(!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(nameVal)){//输入用户名不符合规范
						this.noticeText = '用户名由6-15位数字、英文字母或下划线和中文组成的字符串';
						this.noticeError (this.nodesc);//引入iView提示框---登陆失败
					};
					if(!/^\d{6,15}$/.test(pasVal)){//输入密码错误
						this.noticeText = '密码仅限于6-15位数字';
						this.noticeError (this.nodesc);//引入iView提示框---登陆失败
					};
				}else{
					this.noticeText = '请输入用户名和密码登陆';
					this.showPasInp = true;
					this.noticeError (this.nodesc);//引入iView提示框---登陆失败
				};
			},
			noticeError (nodesc){
				this.$Notice.error({//引入iView提示框
					title: '提示',
					desc: nodesc ? '' : this.noticeText
				});
			},
			noticeSuccess (nodesc){
				this.$Notice.success({//引入iView提示框
					title: '提示',
					desc: nodesc ? '' : '登陆成功，欢迎进入！'
				});
			}
			// submitForm () {
			// 	this.$ajax({
			// 		method: 'get',
			// 		url: 'https://www.easy-mock.com/mock/5a93ac92bf782667fe4c7a32/followTest/someChats',
			// 	}).then(function(res){
			// 		console.log(res.data.data.datas)
			// 	}).catch(function(err){
			// 		console.log(err)
			// 	}) 
			// }
		}
	}
	
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import '../../static/css/login.css'
</style>
